<template>
  <svg :class="svgClass" aria-hidden="true" :style="style">
    <svg :class="svgClass" aria-hidden="true" :style="{ width: `${size}px`, height: `${size}px` }">
      <use :xlink:href="`#icon-${name}`" :fill="color" />
    </svg>
  </svg>
</template>

<script setup lang="ts">

// 接收 props：图标名、颜色、大小
const props = defineProps({
  name: { type: String, required: true }, // 图标文件名（不含 .svg）
  color: { type: String, default: '#666' }, // 图标颜色
  size: { type: Number, default: 16 }, // 图标大小（px）
  className: { type: String, default: '' }, // 额外类名
});
// 拼接类名和样式
const svgClass = props.className ? `svg-icon ${props.className}` : 'svg-icon';
const style = {
  width: `${props.size}px`,
  height: `${props.size}px`,
};
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  vertical-align: middle;
   overflow: hidden;
}
</style>